<template>

  <div class="center-detail-container" ref="wrapper">
    <div class="center-container" v-show="centerDetail">
      <div v-html="centerDetail" @load.capture="load"></div>
    </div>
  </div>

</template>

<script>
import { http } from 'api/main'
import BScroll from 'better-scroll'

export default {
  data() {
    return {
      centerDetail: '',
    }
  },
  created() {
    this._getcenterDetail()
  },
  methods: {
    load() {
      this.scroll.refresh();
    },
    _getcenterDetail() {
      http('homeConfig', {
        center: 1
      }).then((res) => {
        console.log(res)
        this.centerDetail = res
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {

      })
    })
  }
}
</script>


<style scoped  scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"

  .center-detail-container
    position: fixed;
    z-index: 100
    top: 0px
    right: 0px
    bottom: 0px
    left: 0px
    background-color: #fff
    overflow: hidden;
    padding: 10px
    .center-container
      width: 100%
      overflow: hidden
      .center-title
        font-size: 25px
        height: 56px
        line-height: 28px
        line-no-wrap(2)
      .center-time
        margin-top: 10px
        height: 20px
        line-height: 20px
        color: #888
        i
          margin-right: 5px
      .center-detail
        margin-top: 10px

</style>
